<template>
	<view class="main_box">
		<view class="fix_title">
			{{stepTitle}}
		</view>
		<form v-if="step == 1" @submit="" @reset="">
			<view class="info_item">
				<input type="text" v-model="userInfo.name" value="" placeholder="请输入真实姓名" />
			</view>
			<view class="info_item">
				<input type="idcard" v-model="userInfo.idCard" value="" placeholder="请输入身份证号码" />
			</view>
			<view class="btn_box">
				<button class="submitBtn radius_btn" style="width: 100%;" form-type="submit" @click="_getUserInfo">下 一 步</button>
			</view>
		</form>
		<view v-if="step == 2" class="">
			<!-- <view v-if="collectionIs && userInfo.localId == ''" class="portrait" @click="_changeImg">
				<view class="portrait_img">
					<image :src="userInfo.imgFile" mode="aspectFit" style="width: 320upx;height: 430upx;"></image>
				</view>
			</view> -->
			<!-- <view v-else-if="userInfo.localId == ''" class="portrait" @click="_changeImg">
				<view class="portrait_img">
					<image src="/static/images/get_portrait.png" mode="aspectFit"></image>
				</view>
				<view class="portrait_hint portrait_hint_center">
					点击选择/拍摄人像
				</view>
			</view>
			<view v-else class="portrait" @click="_changeImg">
				<view class="portrait_img">
					<image :src="userInfo.localId" mode="aspectFit" style="width: 320upx;height: 430upx;"></image>
				</view>
			</view> -->
			<view class="portrait" @click="_changeImg">
				<view class="portrait_img">
					<image :src="imgSrc" mode="aspectFit"></image>
				</view>
				<!-- <view class="portrait_hint portrait_hint_center">
					点击采集人像
				</view> -->
				<view class="btn_box" style="margin: 0;">
					<button class="submitBtn radius_btn">采集人像</button>
				</view>
			</view>
			<view>
				<view class="portrait_hint">
					<text>个人信息确认</text>
				</view>
				<view class="hint_text">
					<view>
						姓名： {{userInfo.name}}
					</view>
					<view>
						身份证： {{userInfo.idCard}}
					</view>
				</view>
			</view>
			<view>
				<view class="portrait_hint">
					<text>采集拍摄须知</text>
				</view>
				<view class="hint_text">
					<view>
						1.采集人像请确保是本人操作，避免不必要的损失和麻烦;
					</view>
					<view>
						2.采集时面部无遮挡物，不佩戴墨镜等深色镜片的眼镜;
					</view>
					<view>
						3.采集时请确保光线充足，能清晰看见五官轮廓;
					</view>
				</view>
			</view>
			<view class="btn_box">
				<button class="submitBtn radius_btn plain" form-type="submit" @click="_prevStep">上 一 步</button>
				<button class="submitBtn radius_btn" form-type="submit" @click="_upLoadPortrait">提 交</button><!-- {{isPhone ? '更新采集信息' : '提交采集信息'}} -->
			</view>
		</view>
		<view v-if="step == 3" class="">
			<view class="portrait_img">
				<image src="/static/images/ok.png" style="width: 289upx;height: 256upx;" mode="aspectFill"></image>
			</view>
			<view class="btn_box">
				<button class="submitBtn radius_btn" style="width: 100%;" form-type="submit" @click="_portraitOK">采集完成</button>
			</view>
		</view>
		<custom-modal :isShow="showMcModal" :showCancel="false" :content="content" :title="title" @cancel='bb()' :inp="false" @ok='cc()'/>
		<tmcModal :isShow="showMcModal1" :showCancel="false" :content="content1" :title="title1" @ok='()=>{showMcModal1 = false}'></tmcModal>
	</view>
</template>

<script>
	let _this;
	import {queryMilkCardBalance,upFaceImg,getMilkFaceImg,updateFaceImg,getWxJsApiSignature,milkUpFace} from '../../common/api/index.js';
	import customModal from '../../components/custom-modal/custom-modal.vue';
	import tmcModal from '../../components/custom-modal/mc-modal.vue'
	// #ifdef H5
	import wx from '../../common/js/wx-js-sdk.js';
	// #endif
	import {imgURL,requestURL} from '../../common/utils/config.js'
	import {_showLoading, _showToast} from '../../common/js/util.js'
	export default {
		data() {
			return {
				step: 1,
				userPortrait: '',
				userInfo: {
					imgFile: '',
					localId: '',
					idCard: uni.getStorageSync('idCard'),
					empId: uni.getStorageSync('EmpId'),
					name: uni.getStorageSync('EmpName'),
					orgId: uni.getStorageSync('OrgId'),
					mediaId: '',
					appId: uni.getStorageSync('str1')
				},
				content: '',
				title: '',
				showMcModal: false,
				content1: '',
				title1: '',
				showMcModal1: false,
				isSound: true,
				AutoClip: true,
				backCamera:false,
				isPhone: false,
				imgSrc: '/static/images/get_portrait.png',
				base64ImageCrop: '',
				base64Image: '',
				permissionsStatus: false,
				setFaceConfigStatus: false,
				collectionIs: 0,
				imageList: [],  // 本地图片路径
				imageBase64List: [] // base64格式的图片
			}
		},
		components: {
			customModal,
			tmcModal
		},
		onLoad(option) {
			this.userInfo.orgId = option.orgId
			this.userInfo.empId = option.empId
			this.userInfo.name = option.empName
			console.log(this.userInfo)
			_this = this
			_this._queryMilkCardBalance()
			// _this._getFaceImg()
		},
		methods: {
			bb() {
				this.showMcModal = false
			},
			cc() {
				this.showMcModal = false
				uni.reLaunch({
					url: '/pageMilk/index/index'
				})
			},
			_nextStep() {
				if (this.step < 3) this.step += 1
			},
			_prevStep() {
				if (this.step < 3 && this.step > 1) this.step -= 1
			},
			_getUserInfo() {
				if (this.userInfo.name == '') {
					uni.showToast({
						duration: 1500,
						title: '请输入真实姓名',
						icon: 'none'
					})
					return
				}
				if (this.userInfo.idCard == '') {
					uni.showToast({
						duration: 1500,
						title: '请输入本人有效身份证',
						icon: 'none'
					})
					return
				}
				this._nextStep()
			},
			_queryMilkCardBalance() {
				let s_userId = uni.getStorageSync('s_userId')
				queryMilkCardBalance({
					bindType: 3,
					userId: s_userId,
					queryCard: true,
					queryWallet: true
				}).then(res => {
					if (res.code == 0) {
						if (res.data.students.length > 0) {
							this.userInfo.name = res.data.students[0].students[0].empName
							this.userInfo.idCard = res.data.students[0].students[0].idCardNo
							this.userInfo.empId = res.data.students[0].students[0].empId
							this.userInfo.orgId = res.data.students[0].students[0].orgId
							_this._getFaceImg()
						}
					}
				}).catch(err => {
					console.log(err)
				})
			},
			_changeImg() {
				this.takePhone()
			},
			btnSave() {
				if(this.unBaseImgSrc == ''){
					this.title1 = '温馨提示'
					this.content1 = '请先点击选择或录制人像'
					this.showMcModal1 = true
					return
				}
				uni.showLoading({
					title: '采集中...'
				})
				milkUpFace({
					empId: this.userInfo.empId,
					empName: this.userInfo.name,
					orgId: this.userInfo.orgId,
					img: this.unBaseImgSrc
				}).then(res => {
					if(res.code == 0) {
						uni.hideLoading()
						this.title = '温馨提示'
						this.content = '恭喜您，人脸采集成功!'
						this.showMcModal = true
					}else{
						uni.hideLoading()
						this.title1 = '温馨提示'
						this.content1 = '上传失败，'+res.msg
						this.showMcModal1 = true
					}
				}).catch(err => {
					uni.hideLoading()
					console.log(err)
				})
			},
			takePhone() {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'],
					sourceType: ['camera'],
					success: function(res) {
						_this.imageList = res.tempFilePaths;
						// #ifdef MP-WEIXIN
						uni.showLoading({
							title: '转码中...'
						})
						uni.getFileSystemManager().readFile({
							filePath: res.tempFilePaths[0],
							encoding: 'base64',
							success: res => {
								console.log(res)
								let base64 = 'data:image/jpeg;base64,' + res.data //不加上这串字符，在页面无法显示的哦
								_this.userInfo.localId = base64 // localData是图片的base64数据，可以用img标签显示
								_this.userInfo.imgFile = res.data
								_this.imgSrc = base64
								_this.unBaseImgSrc = res.data
								_this.isConn = true
								setTimeout(() => {
									uni.hideLoading()
								}, 1000)
							},
							fail: (e) => {
								uni.hideLoading()
								console.log(e)
							}
						})
						// #endif
					},
					fail:function(e){
						console.log(e)
					}
				});
			},
			_upLoadPortrait() {
				this.btnSave()
			},
			submit() {
				uni.showLoading({
					title: '采集中',
				})
				if (this.collectionIs) {
					uni.showLoading({
						title: '更新中',
					})
					updateFaceImg(this.userInfo).then(res => {
						uni.hideLoading()
						if (res.code == 0) {
							uni.showModal(({
								title: '提示',
								content: '恭喜！人像更新成功',
								showCancel: false,
								success: (res)=>{
									if (res.confirm) {
										_this._portraitOK()
									}
								}
							}))
						} else {
							uni.showModal(({
								title: '提示',
								content: '更新失败，' + res.msg,
								showCancel: false,
							}))
						}
					}).catch(err => {
						uni.showModal(({
							title: '提示',
							content: JSON.stringify(err),
							showCancel: false,
						}))
					})
				} else {
					milkUpFace(this.userInfo).then(res => {
						uni.hideLoading()
						if (res.code == 0) {
							uni.showModal(({
								title: '提示',
								content: '恭喜！人像采集成功',
								showCancel: false,
								success: (res)=>{
									if (res.confirm) {
										_this._portraitOK()
									}
								}
							}))
						} else {
							uni.showModal(({
								title: '提示',
								content: '采集失败，' + res.msg,
								showCancel: false,
							}))
						}
					}).catch(err => {
						uni.showModal(({
							title: '提示',
							content: JSON.stringify(err),
							showCancel: false,
						}))
					})
				}
			},
			_portraitOK() {
				uni.reLaunch({
					url: '/pageMilk/index/index'
				})
			},
			_getFaceImg() {
				getMilkFaceImg({
					empId: this.userInfo.empId,
					orgId: this.userInfo.orgId
				}).then(res => {
					if (res.code == 0) {
						if(res.data != null) {
							this.imgSrc = res.data.imgUrl
							this.isPhone = true
						} else {
							this.isPhone = false
						}
					} else {
						uni.showToast({
							duration: 1500,
							title: res.msg,
							icon: 'none'
						})
					}
				}).catch(err => {
					console.log(err)
				})
			},
		},
		computed: {
			stepTitle() {
				return this.step == 1 ? '输入确认个人信息' : this.step == 2 ? '人像采集' : '采集完成'
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main_box {
		padding: 24upx;
		// height: 100vh;
		box-sizing: border-box;
		overflow-y: auto;
	}

	.info_item {
		padding: 24upx;
		background: #F7F6FB;
		margin: 24upx 0;
	}

	.fix_title {
		margin: 30upx 0 60upx 0;
		font-size: 40upx;
		font-weight: bolder;
		display: flex;
		align-items: center;

		&::before {
			content: '';
			height: 36upx;
			width: 12upx;
			background-image: linear-gradient(to bottom, #c3defc, #007AFF);
			margin-right: 12upx;
			border-radius: 6upx;
		}
	}

	.submitBtn {
		margin: 0 24upx;
		border-width: 0px;
		height: 90upx;
		line-height: 90upx;
		background: inherit;
		background-color: $uni-color-primary;
		box-sizing: border-box;
		border-width: 0;
		// border-style: solid;
		// border-color: rgba(242, 242, 242, 1);
		border-radius: 6upx;
		-moz-box-shadow: none;
		-webkit-box-shadow: none;
		box-shadow: none;
		color: #FFFFFF;

		&.radius_btn {
			border-radius: 45upx;
			box-shadow: 0px 8px 9px 0px #c3defc;
		}

		&.plain {
			background: transparent;
			border: 1px solid #c3defc;
			color: #333;

			&:active {
				background-color: #c3defc;
			}
		}

		&:active {
			background-color: #3266a5;
		}

		&::after {
			border: none;
		}
	}

	.portrait {
		display: flex;
		justify-content: center;
		flex-direction: column;
		margin: 48upx 0;
	}

	.portrait_img {
		text-align: center;

		image {
			width: 320upx;
			height: 320upx;
			border-radius: 10upx;
			overflow: hidden;
		}
	}

	.portrait_hint {
		font-weight: bolder;
		font-size: 30upx;
		margin: 24upx 0;

		&.portrait_hint_center {
			text-align: center;
		}
	}

	.hint_text {
		font-size: 24upx;
		color: #999;
		line-height: 36upx;
	}

	.btn_box {
		margin-top: 100upx;
		display: flex;
		flex-direction: row;
		justify-content: center;
	}
</style>
